<template>
    <div>
      <el-select
        v-model="value"
        :multiple="false"
        collapse-tags
        style="width: 100%"
        @change="handleChange"
        size="small"
        :placeholder="$t('labels.pleaseSelect')"
        @visible-change="handleVisible"
      >
        <el-option
          v-for="item in datas"
          :key="item.id"
          :label="item.name"
          :value="item.id"
          :class="optionClass"
        >
          <span style="float: left">{{ item.code }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{
            item.name
          }}</span>
        </el-option>
      </el-select>
    </div>
  </template>
  <script>
  import { getWarehouses } from "@/api/warehouse";
  export default {
    data() {
      return {
        datas: [],
        value: null,
      };
    },
    model: {
      prop: "id",
      event: "innerChange",
    },
    methods: {
      getData() {
        getWarehouses({ pageIndex: 1, pageSize: 10000 }).then((res) => {
          this.datas = res ? res.items : [];
        });
      },
      handleChange(value) {
        this.$emit("innerChange", value);
  
        let selected = !value ? {} : this.datas.find((x) => x.id == value);
        this.$emit("change", selected);
      },
      handleVisible(visible) {
        this.$emit("visible-change", visible);
      },
    },
    watch: {
      id: {
        handler(val) {
          this.value = val;
        },
      },
    },
    mounted() {
      this.getData();
    },
    props: {
      id: {
        type: String,
      },
      optionClass: {
        type: String,
        default: "",
      },
    },
  };
  </script>
  